<template>
    <div class='container'>
        <!-- :visible.sync="addDialog" -->
        <el-dialog :title="node.id ? '修改学科' : '新增学科'" :visible="showDialog" @close="btnCancel">
            <el-form  ref="dataForm"  label-position="left" label-width="120px"
                style="width: 400px; margin-left:120px;" :model="FormData" :rules="rules">

                <el-form-item label="文章标题" prop="title">
                    <el-input  placeholder="请输入文章标签" v-model="FormData.title"></el-input>
                </el-form-item>

                <!-- 富文本编辑器 -->
                <el-form-item label="文章内容" prop="articleBody" style="height: 300px;" >
                 <quill-editor
                 placeholder='请输入内容'
                 style="height: 250px;" 
                 v-model="FormData.articleBody"
                 ref="myQuillEditor" 
                 :options="editorOption" 
                @blur="onEditorBlur($event)" 
                @focus="onEditorFocus($event)"
                @change="onEditorChange($event)">
                     </quill-editor>
                     </el-form-item>

                <el-form-item label="视频地址"  prop="videoURL">
                    <el-input  placeholder="请输入视频地址"  v-model="FormData.videoURL"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button  @click="btnCancel">取 消</el-button>
                 <el-button type="primary" @click="btnOk">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
// 富文本
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import {add,detail,update } from '@/api/hmmm/articles.js'
export default {
    components: {
    quillEditor
  },
    props:{
        showDialog:{
            type:Boolean,
            require:true
        },
        node: {
            type: Object,
            default: {}
        }
    },
  data(){
    return{
        FormData:{
          articleBody:'',
           title:'',
           videoURL:''
        },
        editorOption: {
        placeholder: this.placeholder,
				modules:{ 
                         //modules为自定义标题栏，使用默认的话可去掉modules
                        toolbar:[
                           ['bold', 'italic', 'underline', 'strike'],//分别对应的是： 粗体，斜体，下划线，删除线   
                        ]
                    }

			},
            rules:{
                 title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
                //  articleBody:  [{ required: true, message: '请输入文章内容', trigger: 'blur' }]
            }
        }

    },
    methods: {
        onEditorReady(editor) { // 准备编辑器
 
        },
        onEditorBlur(){}, // 失去焦点事件
        onEditorFocus(){}, // 获得焦点事件
        onEditorChange(){}, // 内容改变事件
      async detail(node) {
            let { data } = await detail(node)
            console.log(data);
            this.FormData.articleBody = data.articleBody
            this.FormData.title = data.title
            this.FormData.videoURL = data.videoURL
           },
    async  btnOk () {
       await this.$refs.dataForm.validate()
            if (this.node.id) {
                await update({ id: this.node.id, ...this.FormData })
            } else {
                await add(this.FormData)
            }
        // 重新渲染页面
                this.$emit('updateFrom')
                // 成功提示
                 this.$message.success(this.node.id ? '修改学科成功啦!' : '新增学科成功啦!')
                // 关闭弹窗
                // .sync 固定写法('update:props名称',值)
                // 语法糖:等同于给属性值加一个自定义事件 ('update:props名称', 要修改的值)
                this.$emit('update:showDialog', false)
    },
    async btnCancel () {
 // 1.关闭弹窗 隐藏 会一直在文档中
            this.$emit('update:showDialog', false)
            // 2.清空数据和表单验证
            this.$refs.dataForm.clearValidate()  //只能清空表单绑定的数据
            // 手动清空数据 清空和表单无关的数据
            this.FormData = {
               articleBody:'',
               title:'',
               videoURL:''
            }
    }
    }
 }
      
</script>

<style scoped lang='scss'>

</style>
